<template>
  <div class="pwd">
    <van-form>
      <van-cell-group inset>
        <van-field v-model="formData.name" placeholder="请输入收件人名字" />
        <van-field v-model="formData.mobile" placeholder="请输入收件人手机号" />
        <van-field v-model="formData.address" placeholder="请输入完整的收货地址" />
        <!-- <van-field v-model="formData.verificationCode" placeholder="请输入验证码">
          <template #right-icon>
            <span class="solts">
              <van-button type="primary" class="getCodeClass" @click="getImgcode" :disabled="!!formData.counter">{{formData.sendBtnText}}</van-button>
            </span>
          </template>
        </van-field> -->
      </van-cell-group>
    </van-form>
    <div class="tips">请把收货地址填写完整，避免收不到货</div>
    <van-button type="primary" class="block_gradual" :loading="formData.loading" @click="confirm">保存</van-button>
  </div>
</template>
<script>

import { defineComponent, reactive, computed, onMounted, ref } from 'vue'
import { useStore } from "vuex";
import { useRouter } from 'vue-router'
import { editReceiving } from "@/api/public";
import { Toast } from "vant";
import payPwd from "@/components/payPwd.vue";
import { formatPhoneNumber } from "@/utils/phone";
import { getLocal } from "@/utils/localStorage";
export default {
  components: {
    payPwd
  },
  setup(props) {
    const store = useStore();
    const router = useRouter()
    const user_info = computed(() => {
      return store.getters.user_info
    })
    const pwdwarp = ref(null)
    const formData = reactive({
      name: store.getters.user_info.receivingName,
      loading: false,
      sendBtnText: "获取验证码",
      verificationCode: '',
      mobile: store.getters.user_info.receivingMobile,
      imgcodeShow: false,
      address: store.getters.user_info.receivingAddress
    })
    const confirm = async () => {
      const data = {
        receivingAddress: formData.address,
        receivingMobile: formData.mobile,
        receivingName: formData.name

      }
      formData.loading = true
      if (!formData.address || !formData.name || !formData.mobile) {
        Toast('请填完整信息');

      } else {
        const res = await editReceiving(data)
        if (res.data.success) {
          formData.loading = false
          Toast(res.data.message);
          await store.dispatch('user/getUserAll')
        }
        console.log(res)
      }
      formData.loading = false
    }


    return {
      user_info, formData, confirm

    }
  }

}
</script>
<style lang="less" scoped>
.tips {
  text-align: center;
  font-size: 26px;
  font-family: Source Han Sans CN;
  font-weight: 300;
  color: #ffffff;
  line-height: 48px;
  opacity: 0.6;
}

.pwd {
  &:deep(.van-cell-group) {
    background: transparent;
    margin-top: 100px;
  }

  &:deep(.van-field) {
    width: 684px;
    height: 100px;
    background: #282a2c;
    border: 1px solid #ffffff;
    border-radius: 18px;
  }

  .block_gradual {
    width: 682px;
    height: 92px;
    background: linear-gradient(-90deg, #37dc6d, #34d1f9);
    border-radius: 46px;
    margin: 300px 30px 0px;
  }

  .getCodeClass {
    border: none;
    height: 47px;
    background: linear-gradient(-90deg, #37dc6d, #34d1f9);
    border-radius: 24px;
  }
}

.imgcode {
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  height: 80vh;
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 4rem;

  .block_gradual {
    margin: 0.6rem 0px;
  }

  h1 {
    font-size: 36px;
    text-align: center;
  }

  .warp {
    position: relative;
    background: white;
    padding: 5%;
    border-radius: 8px;
    width: 80%;
    margin: 0 auto;

    .close {
      position: absolute;
      font-size: 0.7rem;
      right: 3%;
      top: 3%;
    }

    .flex {
      margin-top: 0.5rem;
      display: flex;

      &:deep(.van-field) {
        border: solid 1px #8c8a8a;
        border-radius: 4px;
        background: transparent !important;
      }

      &:deep(.van-field__control) {
        font-size: 26px;
        color: #282a2c;
      }
    }
  }
}
</style>